<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/style.css"/>
    <link rel="stylesheet" href=" https://cdn.hangzhou.com.cn/jscdn/vant-2.12.54/index.css"/>
    <script src="./js/jquery.min.js"></script>
    <script src="https://cdn.hangzhou.com.cn/jscdn/axios/axios.min.js"></script>
    <script src="https://cdn.hangzhou.com.cn/jscdn/vue-2.6/vue.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.hangzhou.com.cn/jscdn/vant-2.12.54/vant.min.js"></script>
</head>
<style>
  body,html,#app{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 450px;
}
.countdown{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
</style>
<body>
 <div id="app">
    <div class="pop" v-show="showPop">
            <!-- <div class="popDiv" v-show="content">
                  <div class="pop_top">
                         <div>{{count+1}}/3</div>
                         <div>第{{level}}关</div>
                         <div class="countdown">{{time}}s</div>
                         <img @click="close" class="wrong" src="./images/wrong.png" alt="">
                  </div>
                  <div class="pop_tit">{{count+1}}.{{game_list[count].title}}</div>
                  <div class="pop_con">
                    <template v-for="(item,index) in game_list[count].answer_list">
                        <button v-bind:disabled="disabled" class="op"  :class="{'active':isSelect&&ind==index,'activeWrong':wrong&&ind==index}" @click="select(item.option,index)">{{item.tit}}
                             <img v-show="isSelect&&ind==index" class="asimg" src="./images/answer_right.png" alt=""> 
                             <img v-show="wrong&&ind==index" class="wimg" src="./images/x.png" alt=""> 
                        </button>
                    </template> 
                  </div>
                  <div v-show="this.count<2&&!wrong" class="pop_bottom" @click="next">下一题</div>
            </div>
           <div class="finishpop" v-show="isFinish">
               <div  class="pop_bottom" @click="lottery">去抽奖</div>
           </div>
           <div class="lotterySuccesspop" v-show="lotterySuccess">
                <div  class="pop_bottom" @click="fill">去填写</div>
            </div>
            <div class="lotteryFailpop" v-show="lotteryFail">
                 <img @click="close2" class="x2" src="./images/x2.png" alt="">
            </div> -->
            <div class="showFormpop" v-show="showForm">
                <img class="liwu" src="./images/liwu.png" alt="">
                <p style="margin-top: 20px;">恭喜您中奖</p>
                <p style="margin-bottom: 20px;">请填写以下信息</p>
                <input class="myinput" type="text" placeholder="姓名" v-model="name">
                <input class="myinput" type="text" placeholder="联系方式" v-model="phone">
                <input class="myinput" type="text" placeholder="邮寄地址" v-model="address">
                <p style="margin-top: 10px;">备注：请您填写准确的邮寄信息，活动结束后，我们会在浙江省血液中心微信公众号上公示获奖名单，并尽快邮寄，请您耐心等待！</p>
                <div  class="pop_bottom" @click="submit">提交</div>
            </div>
    </div>
     <div class="game">
         <img class="game_rule" @click="rule" src="./images/rule.png" alt="">
         <img class="game_logo" src="./images/logo.png" alt="">
         <img class="game_title" src="./images/game_title.png" alt="">
         <img v-show="start" class="per per0" src="./images/per.png" alt="">
         <template v-for="(item,index) in 11">
            <div @click="question(index)" class="water" :class="'water'+item">
                <div class="per_div">
                   <div v-show="gameIndex==index&&!start">
                       <img v-if="(index+1)%2==0" class="per"  :class="'per'+item" src="./images/per_right.gif" alt="">
                       <img v-else class="per"  :class="'per'+item" src="./images/per_left.gif" alt="">
                   </div>
                   <div v-show="pass[index].ispass" class="guoguan">已过关</div>
                </div>
            </div>
         </template>
         <div class="successpop" v-show="gamesuccess">
             <div>
                 <img v-show="success" class='right' src="./images/right.png" alt="">
                 <img v-show="wrong" class="frowning-face" src="./images/frowning-face.png" alt="">
             </div>
             <div style="">{{text}}</div>
       </div>
     </div>
  
 </div>
</body>
</html>
<script>
    var app = new Vue({
    el: '#app',
    data: {
        time:30,
        name:'',
        phone:'',
        address:'',
        content:false,//题目列表
        showForm:true,//提交信息面板
        lotteryFail:false,//未中奖
        lotterySuccess:false,//中奖
        isFinish:false,//通关后抽奖
        text:'',
        wrong:false,
        success:false,
        gamesuccess:false,//当前关卡已过关
        isSelect:false,
        disabled:false,//禁用点击事件
        count:0,//当前关卡的第几题
        start:true,//初始状态
        gameIndex:0,//当前所在关卡
        showPop:false,//显示当前题目弹窗
        list:[
                {
                    id: 2923,
                    title: '1  新闻媒体是否应该大力宣传献血先进事迹、典型人物？',
                    answer_suss:'A',
                    answer_id: 10918,
                    answer_list: [
                                                    {
                            option: 10918, tit: 'A、应该'
                        },
                                                {
                            option: 10919, tit: 'B、不应该'
                        },
                                            ]
                },
                 {
                    id: 2910,
                    title: '2  血站工作人员可以让不符合献血条件的人参加献血吗？',
                    answer_suss:'B',
                    answer_id: 10880,
                    answer_list: [
                                                    {
                            option: 10879, tit: 'A.可以'
                        },
                                                {
                            option: 10880, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2909,
                    title: '3  一个健康的适龄无偿献血者，最多可以捐献400毫升的全血，对吗？',
                    answer_suss:'A',
                    answer_id: 10877,
                    answer_list: [
                                                    {
                            option: 10877, tit: 'A.正确'
                        },
                                                {
                            option: 10878, tit: 'B.错误'
                        },
                                            ]
                },
                                {
                    id: 2906,
                    title: '4  无偿捐献的血液可以买卖吗？',
                    answer_suss:'B',
                    answer_id: 10871,
                    answer_list: [
                                                    {
                            option: 10870, tit: 'A.可以'
                        },
                                                {
                            option: 10871, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2927,
                    title: '5  人体的主要储血器官是哪个部位？',
                    answer_suss:'B',
                    answer_id: 10928,
                    answer_list: [
                                                    {
                            option: 10927, tit: 'A.肾脏'
                        },
                                                {
                            option: 10928, tit: 'B.肝脏'
                        },
                                            ]
                },
                                {
                    id: 2928,
                    title: '6  捐献机采血小板后，献血者多久后可以捐献全血？',
                    answer_suss:'A',
                    answer_id: 10929,
                    answer_list: [
                                                    {
                            option: 10929, tit: 'A.四周'
                        },
                                                {
                            option: 10930, tit: 'B.3个月'
                        },
                                                {
                            option: 10931, tit: 'C.6个月'
                        },
                                            ]
                },
                                {
                    id: 2908,
                    title: '7  公民临床用血时，需要交付血液的采集、储存、分离、检验等费用吗？',
                    answer_suss:'A',
                    answer_id: 10875,
                    answer_list: [
                                                    {
                            option: 10875, tit: 'A.需要'
                        },
                                                {
                            option: 10876, tit: 'B.不需要'
                        },
                                            ]
                },
                                {
                    id: 2911,
                    title: '8  国家鼓励哪些群体率先献血，为树立社会新风尚作表率？',
                    answer_suss:'C',
                    answer_id: 10883,
                    answer_list: [
                                                    {
                            option: 10881, tit: 'A.国家工作人员、现役军人'
                        },
                                                {
                            option: 10882, tit: 'B.高等学校在校学生'
                        },
                                                {
                            option: 10883, tit: 'C.以上都是'
                        },
                                            ]
                },
                                {
                    id: 2926,
                    title: '9  献血后会导致发胖吗？',
                    answer_suss:'B',
                    answer_id: 10926,
                    answer_list: [
                                                    {
                            option: 10925, tit: 'A.会'
                        },
                                                {
                            option: 10926, tit: 'B.不会'
                        },
                                            ]
                },
                                {
                    id: 2920,
                    title: '10  医疗机构应当积极采用哪些先进技术，提高科学用血水平，保证医疗质量和安全？',
                    answer_suss:'B',
                    answer_id: 10904,
                    answer_list: [
                                                    {
                            option: 10903, tit: 'A.成分输血、自体输血'
                        },
                                                {
                            option: 10904, tit: 'B.成分输血、自体输血、节血手术'
                        },
                                                {
                            option: 10905, tit: 'C.自体输血、节血手术'
                        },
                                            ]
                },
                                {
                    id: 2932,
                    title: '11  王明今年刚满18周岁，是杭州亚运会的志愿者，请问，他可以献血吗？',
                    answer_suss:'A',
                    answer_id: 10939,
                    answer_list: [
                                                    {
                            option: 10939, tit: 'A.可以'
                        },
                                                {
                            option: 10940, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2921,
                    title: '12  县级以上人民政府根据本地实际，设立什么资金，用于对献血者的关爱和无过错用血感染人员的救助。',
                    answer_suss:'C',
                    answer_id: 10914,
                    answer_list: [
                                                    {
                            option: 10912, tit: 'A.公益性专项'
                        },
                                                {
                            option: 10913, tit: 'B.献血者关爱性专项'
                        },
                                                {
                            option: 10914, tit: 'C.献血关爱公益性专项'
                        },
                                            ]
                },
                                {
                    id: 2917,
                    title: '13  在浙江省，一位献血者献血量达多少毫升，本人可以享受终身免交临床用血费用？',
                    answer_suss:'C',
                    answer_id: 10897,
                    answer_list: [
                                                    {
                            option: 10895, tit: 'A.200毫升'
                        },
                                                {
                            option: 10896, tit: 'B.300毫升'
                        },
                                                {
                            option: 10897, tit: 'C.400毫升'
                        },
                                            ]
                },
                                {
                    id: 2929,
                    title: '14  献血后，建议献血者休息多久，再行离开？',
                    answer_suss:'B',
                    answer_id: 10933,
                    answer_list: [
                                                    {
                            option: 10932, tit: 'A.5-10分钟'
                        },
                                                {
                            option: 10933, tit: 'B.10-15分钟'
                        },
                                                {
                            option: 10934, tit: 'C.15-20分钟'
                        },
                                            ]
                },
                                {
                    id: 2930,
                    title: '15  人体内血液是可再生的吗？',
                    answer_suss:'A',
                    answer_id: 10935,
                    answer_list: [
                                                    {
                            option: 10935, tit: 'A.可以'
                        },
                                                {
                            option: 10936, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2915,
                    title: '16  成分（单采血小板）献血者两次的献血间隔时间应不少于几周？',
                    answer_suss:'B',
                    answer_id: 10892,
                    answer_list: [
                                                    {
                            option: 10891, tit: 'A.1周'
                        },
                                                {
                            option: 10892, tit: 'B.2周'
                        },
                                            ]
                },
                                {
                    id: 2913,
                    title: '17  各级人民政府和红十字会对积极参加献血和在献血工作中做出显著成绩的单位和个人，不需要给予奖励。这个说法正确吗？',
                    answer_suss:'B',
                    answer_id: 10888,
                    answer_list: [
                                                    {
                            option: 10887, tit: 'A.正确'
                        },
                                                {
                            option: 10888, tit: 'B.错误'
                        },
                                            ]
                },
                                {
                    id: 2933,
                    title: '18  献血会不会上瘾？',
                    answer_suss:'B',
                    answer_id: 10942,
                    answer_list: [
                                                    {
                            option: 10941, tit: 'A.会'
                        },
                                                {
                            option: 10942, tit: 'B.不会'
                        },
                                            ]
                },
                                {
                    id: 2919,
                    title: '19  献血者申领浙江省无偿献血荣誉证（简称“三免”荣誉证），可以在浙江省内到非营利性医疗机构就诊可以免交门诊诊查费吗？',
                    answer_suss:'A',
                    answer_id: 10901,
                    answer_list: [
                                                    {
                            option: 10901, tit: 'A.可以'
                        },
                                                {
                            option: 10902, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2925,
                    title: '20  定期适量献血可以预防和降低心脑血管病的产生吗？',
                    answer_suss:'A',
                    answer_id: 10923,
                    answer_list: [
                                                    {
                            option: 10923, tit: 'A.可以'
                        },
                                                {
                            option: 10924, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2912,
                    title: '21  非法组织他人出卖血液的，由县级以上地方人民政府卫生行政部门予以取缔，没收违法所得，可以并处多少的罚款？构成犯罪的，依法追究刑事责任。',
                    answer_suss:'A',
                    answer_id: 10884,
                    answer_list: [
                                                    {
                            option: 10884, tit: 'A.十万元以下'
                        },
                                                {
                            option: 10885, tit: 'B.五万元以上'
                        },
                                                {
                            option: 10886, tit: 'C.二十万元以下'
                        },
                                            ]
                },
                                {
                    id: 2922,
                    title: '22  固定献血屋应当设置在什么的区域？',
                    answer_suss:'C',
                    answer_id: 10917,
                    answer_list: [
                                                    {
                            option: 10915, tit: 'A.人流密集'
                        },
                                                {
                            option: 10916, tit: 'B.交通便利'
                        },
                                                {
                            option: 10917, tit: 'C.人流密集、交通便利'
                        },
                                            ]
                },
                                {
                    id: 2914,
                    title: '23  全血献血者的献血间隔时间应不少于几个月？',
                    answer_suss:'B',
                    answer_id: 10890,
                    answer_list: [
                                                    {
                            option: 10889, tit: 'A.3个月'
                        },
                                                {
                            option: 10890, tit: 'B.6个月'
                        },
                                            ]
                },
                                {
                    id: 2931,
                    title: '24  献血前，献血者可以喝牛奶吗？',
                    answer_suss:'B',
                    answer_id: 10938,
                    answer_list: [
                                                    {
                            option: 10937, tit: 'A.可以'
                        },
                                                {
                            option: 10938, tit: 'B.不可以'
                        },
                                            ]
                },
                                {
                    id: 2907,
                    title: '25  《中华人民共和国献血法》是什么时候正式颁布施行的？',
                    answer_suss:'C',
                    answer_id: 10874,
                    answer_list: [
                                                    {
                            option: 10872, tit: 'A.1997年12月29日'
                        },
                                                {
                            option: 10873, tit: 'B.2014年1月1日'
                        },
                                                {
                            option: 10874, tit: 'C.1998年10月1日'
                        },
                                            ]
                },
                                {
                    id: 2918,
                    title: '26  在浙江省内，无偿献血者达到全国无偿献血奉献奖哪个奖项，旁系也可以享受临床用血优惠政策？',
                    answer_suss:'A',
                    answer_id: 10898,
                    answer_list: [
                                                    {
                            option: 10898, tit: 'A.金奖'
                        },
                                                {
                            option: 10899, tit: 'B.银奖'
                        },
                                                {
                            option: 10900, tit: 'C.铜奖'
                        },
                                            ]
                },
                                {
                    id: 2924,
                    title: '27  在我国汉族人群中，Rh阴性血型的献血比例是多少？',
                    answer_suss:'B',
                    answer_id: 10921,
                    answer_list: [
                                                    {
                            option: 10920, tit: 'A.0.3%'
                        },
                                                {
                            option: 10921, tit: 'B.0.3%~0.5%'
                        },
                                                {
                            option: 10922, tit: 'C.0.5%'
                        },
                                            ]
                },
                                {
                    id: 2916,
                    title: '28  在浙江省，献血者成功捐献400毫升全血后，5年内，其爸爸用血800毫升，请问，其父亲这次的用血费用可以全部减免吗？',
                    answer_suss:'A',
                    answer_id: 10893,
                    answer_list: [
                        {
                            option: 10893, tit: 'A.可以'
                        },
                                                {
                            option: 10894, tit: 'B.不可以'
                        },
                                            ]
                },
            ],
        pass:[
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
            {'ispass':false},
        ],
        gameCount:0

    },
    computed:{
         level(){
            if(this.gameIndex==0){
                return '一'
            }
            if(this.gameIndex==1){
                return '二'
            }
            if(this.gameIndex==2){
                return '三'
            }
            if(this.gameIndex==3){
                return '四'
            }
            if(this.gameIndex==4){
                return '五'
            }
            if(this.gameIndex==5){
                return '六'
            }
            if(this.gameIndex==6){
                return '七'
            }
            if(this.gameIndex==7){
                return '八'
            }
            if(this.gameIndex==8){
                return '九'
            }
            if(this.gameIndex==9){
                return '十'
            }
            if(this.gameIndex==10){
                return '十一'
            }
         },
         game_list(){
                return this.list.slice(this.gameIndex*3,this.gameIndex*3+3)   
         },
         isFinished(){
                var passCount = 0
                this.pass.forEach(element => {
                    if(element.ispass){
                        passCount++
                    }
                });
                if(passCount==11){
                   return true
                }else{
                    return false
                }
         }   
    },
    created(){


    },
    methods:{
       rule(){
        window.location.href = './rule.html'
       },
       question(i){
        
         if(i!=this.gameCount){
            vant.Toast({
                message:'请按顺序闯关',
                icon:'fail',
                className:'toastFont'
            }  ) 
            return
         }
        
         
           
           //如果当前关卡已过关则无法点击
           if(this.pass[i].ispass){
            vant.Toast({
                message:'已过关',
                icon:'fail'
            }  ) 
           }else{
                this.start = false 
               //显示当前人物出现的位置 
                 this.gameIndex = i
                 this.showPop = true
                 this.content = true
                  
                setInterval(()=>{
                        this.time --
                        if(this.time == 0){
                            this.time = 30
                        alert('已经超时')  
                        }
                },1000)
                }
                 
       },
       select(val,ind){
           this.disabled = true
           this.ind = ind
           if(val == this.game_list[this.count].answer_id){
               //选中正确答案   
               this.isSelect = true 
               //三题连续答对则进入下一关
               if(this.count==2){
                  this.gamesuccess = true
                  this.success = true
                  this.text = '闯关成功'
                  setTimeout(()=>{
                    this.time = 30
                    this.gamesuccess = false
                    this.success = false
                  },2000)
                  Vue.set(this.pass[this.gameIndex], 'ispass', true);
                  this.gameCount++
                  if(this.isFinished){
                    // 通关 进入抽奖
                    this.isFinish = true
                    this.content = false
                    this.count = 0
                    this.success=false
                    this.wrong=false
                    this.isSelect=false
                    this.disabled=false
                    
                  }else{
                    setTimeout(()=>{
                            this.showPop = false
                            this.content = false
                            this.count = 0
                            this.success=false
                            this.wrong=false
                            this.isSelect=false
                            this.disabled=false
                            
                    },2000)
                  }   
               }    
           }else{
                 this.wrong = true
                 this.gamesuccess = true
                 this.text = '很遗憾 闯关失败'
                 setTimeout(()=>{
                    this.gamesuccess = false
                    this.wrong = false
                    window.location.href = './index.html'
                  },2000)
            }
        
       },
       countdown(){
            // 初始化
            this.time = 30
            setInterval(()=>{
                        this.time --
                        if(this.time == 0){
                            this.time = 30
                           alert('已经超时')
                           window.location.reload()
                        }
                },1000)
       },
       next(){
           //只有在回答正确的情况下才可以点
           if(this.isSelect){
            this.countdown()
            this.count=this.count+1
            // 数据初始化
            this.wrong=false
            this.isSelect=false
            this.disabled=false
           }
           
       },
       close(){
        this.showPop = false
        this.content = false
       },
       //抽奖    
       lottery(){
            axios.post().then(()=>{
                //中奖 
                // this.lotterySuccess = true
                // this.isFinish = false
                
                //失败  
                // this.lotterySuccess = false
                // this.lotteryFail= true
                // this.isFinish = false
            })
     
       },
       fill(){
          this.showForm = true
          this.content = false
       },
       close2(){
            this.lotteryFail = false
            setTimeout(()=>{
                window.location.href= './index.html'
            },1500)
       },
       submit(){
      
          if(!this.name){
            this.gamesuccess =true
            this.text='请填写姓名!'
            setTimeout(()=>{
                this.gamesuccess =false
            },1000)
            return
          }
          if(!this.phone){
            this.gamesuccess =true
            this.text='请填写联系方式!'
            setTimeout(()=>{
                this.gamesuccess =false
            },1000)
            return
          }
          if(!this.address){
            this.gamesuccess =true
            this.text='请填写邮寄地址!'
            setTimeout(()=>{
                this.gamesuccess =false
            },1000)
            return
          }
          var form = {
            name:this.name,
            phone:this.phone,
            address:this.address
          }
          axios.post('',form).then(()=>{

          })
       }
    }
    })
    Vue.use(vant.Toast);
   
</script>
